<template>
<div>
    <div class="header" :style="{background:color}">
        <ul>           
           <router-link  to="/msg"> <li class="icon-envelop"></li></router-link>
            <router-link  :to="{path:'/search',query:{type:'qbjs'}}"><li class="icon-search"></li></router-link>
        </ul>
    </div>
    <div class="banner" id="searchBar">
    </div>
</div>
</template>
<script>

export default {
    name:'HomeHeader',
    data(){
        return{
            color:"transparent"
        }
    },
   mounted() {
    //首先，在mounted钩子window添加一个滚动滚动监听事件
        window.addEventListener("scroll", this.handleScroll);
    },
    methods: {
    //然后在方法中，添加这个handleScroll方法来获取滚动的位置
        handleScroll() {
            const scrollTop=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop;
            const offsetTop=document.querySelector("#searchBar").offsetTop;
      //设置背景颜色的透明读
            if (offsetTop && scrollTop) {
                this.color = `rgba(255, 255, 255,${scrollTop / (scrollTop + 60)})`;
            } else if (scrollTop == 0) {
                this.color = "transparent";
            }
                else if(scrollTop != 0)
            {
                this.color = "white";
            }
        }
    },
  //由于是在整个window中添加的事件，所以要在页面离开时摧毁掉，否则会报错
    beforeDestroy() {
        window.removeEventListener("scroll", this.handleScroll);
    }
}
</script>
<style lang="scss" scoped>
.header {
    position: fixed;
    top: 0;  
    z-index: 999;
    width: 100%;
    height: rem(130);
    min-width: 320px;
    max-width: 750px;
    background-color: #fff;
    li {
        float: right;
        width: 30px;
        height: 30px;
        margin: rem(30);
        line-height: 30px;

    }
    .icon-search {
        width: rem(60);
        height: rem(60);
        background: url(../../../../assets/imgs/sx.svg) no-repeat 50% 50%;
        background-size: auto 100%;
    }
    .icon-envelop {
        width: rem(60);
        height: rem(60);
        background: url(../../../../assets/imgs/xinf.svg) no-repeat 50% 50%;
        background-size: auto 100%;
    }
}



</style>